<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>11 vue组件ref传值</title>
    </head>
    <body>
        <div id="box">
            <!-- 使用ref属性标记后，在vue中使用$refs就可以获取对应的dom对象 -->
            <input type="text" ref="myText" />
            <button @click="handleClick()">add</button>
            <child ref="myChild"></child>
        </div>

        <script>
            Vue.component('child', {
                template: `<div>{{ parentParam }}</div>`,
                data() {
                    return {
                        childParam: '子组件的参数传值',
                        parentParam: ''
                    };
                },
                methods: {
                    add(parentParam) {
                        this.parentParam = parentParam;
                    }
                }
            });

            const vm = new Vue({
                el: '#box',
                methods: {
                    handleClick() {
                        console.log(this.$refs.myText.value);
                        console.log(this.$refs.myChild.childParam);
                        this.$refs.myChild.add('父组件的参数传值：' + this.$refs.myText.value);
                    }
                }
            });
        </script>
    </body>
</html>
